<template>
  <div>
    <div style="height: 40px">
      <SearchBox @search="searchArticle" @all="getArticlePage" placeholder="请输入文章名称 "></SearchBox>
    </div>
    <div class="articleTable">
      <el-row>
        <el-col :span="12">
          <h2 style="margin-left: 15px">文章列表</h2>
        </el-col>
        <el-col :span="9">
          <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd" style="margin-left: 500px;margin-top: 25px">新建文章</el-button>
        </el-col>
      </el-row>
      <hr style="width: 90%;margin-left: 0"/>
      <div v-for="(item,index) in articleList" :key="item.id" :data="item">
        <div slot-scope="scope">

        </div>
        <ArticleContainer :article="item" >
          <template v-slot:operation1>
            <el-button type="primary" round style="width: 100px;margin-top: 2px;" @click="getDetail(item)">详情</el-button>
            <el-button type="danger" round style="width: 100px;margin-top: 2px;" @click="handleDelete(item)">删除</el-button>
          </template>
        </ArticleContainer>
      </div>
      <pagination v-show="total > 0"
                  :total="total" :page.sync="queryParams.pageNum"
                  :page-sizes="[5]" :layout="'prev, pager, next'"
                  :limit.sync="queryParams.pageSize" @pagination="getArticlePage"
      />
      <el-dialog :visible.sync="open" width="1500px" top="2%" append-to-body @close="handleCancel">
        <el-form ref="form" :model="form" label-width="100px" :rules="articleRules">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title"  placeholder="请输入文章标题" style="width: 500px;"/>
          </el-form-item>
          <el-form-item label="文章类别">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章简介" prop="introduce" >
            <el-input v-model="form.introduce" :rows="2" type="textarea" maxLength="50" placeholder="请输入文章简介，不超过50个字" style="width: 1200px;"/>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <mavon-editor v-model="form.content" style="height: 500px"></mavon-editor>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="detailOpen" append-to-body title="文章详情" fullscreen="true">
        <mavon-editor
          v-model="articleDetail"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
        />
      </el-dialog>

    </div>

  </div>


</template>
<script>
import {addArticle, deleteArticle, listArticle, pageArticle, searchArticle} from "@/api/article";
import ArticleContainer from "@/views/article/ArticleContainer";
import SearchBox from "@/views/reservation/search";
import Pagination from "@/components/Pagination/index";

export default {
  components: {
    SearchBox, ArticleContainer, Pagination
  },
  data() {
    return {
      articleDetail:"",
      options: [{
        value: '健康科普',
        label: '健康科普'
      }, {
        value: '活动宣传',
        label: '活动宣传'
      },],
      articleList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
      loading: false,
      form:{
        title:"",
        content:"",
        type:"",
        introduce:""
      },
      open:false,
      detailOpen:false,
      articleRules: {
        title: [{required: true}, {max: 20, message: "文章标题长度不能超过20位"}],
      },
    }
  },
  created() {
    this.getArticlePage(this.queryParams)
  },
  methods: {
    getDetail(row){
      this.detailOpen=true;
      this.articleDetail=row.content
    },
    handleCancel() {
      this.$refs['form'].resetFields()
      this.open = false;
      this.form =
        {
          title: "",
          type:"",
          content:"",
          introduce:""
        };
    },
    // 新增按钮
    handleAdd() {
      this.open = true;
    },
    handleDelete(row){
      deleteArticle({id:row.id})
        .then((response)=>{
          if(response.success){
            this.$alert("删除成功", {
              confirmButtonText: "确认",
              callback: (action) => {
                this.$router.go(0)
              },
            });
          }
        })
    },
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addArticle(this.form)
            .then((response) => {
              if (response.success) {
                this.$alert("新增成功", {
                  confirmButtonText: "确认",
                  callback: (action) => {
                    // console.log('请检查后重新输入')
                  },
                });
                this.open = false;
                this.queryParams.pageNum=1
                this.getArticlePage(this.queryParams)
              } else {
                throw new Error("出现错误", response.message);
              }
            })
            .catch((e) => {
              this.$alert("出现错误", {
                confirmButtonText: e + "\n" + "请检查后重新输入",
                callback: (action) => {
                  console.log("请检查后重新输入");
                },
              });
            });
        }
      });
    },
    getArticleList() {
      listArticle()
        .then((response) => {
          if (response.success) {
            this.articleList = response.data
          }
        }).catch((e) => {
        _this.$message.error(e, "出现未知错误");
      })
    },
    getArticlePage(data) {
      this.loading = true;
      if(data==null){
        data=this.queryParams;
      }
      pageArticle(data)
        .then((response) => {
          if (response.success) {
            this.articleList = response.data.records;
            if (this.total === 0) {
              this.total = response.data.total;//重要，会决定有几个页码按钮
            }
            this.loading = false;
          }
        }).catch((e) => {
        _this.$message.error(e, "出现未知错误");
      })
    },
    searchArticle(data){
      this.loading=true;
      searchArticle({pageNum:this.queryParams.pageNum,pageSize:this.queryParams.pageSize,title:data})
        .then((response) =>{
            if(response.success){
              this.articleList=response.data.records;
              if (this.total === 0) {
                this.total = response.data.total;//重要，会决定有几个页码按钮
              }
              this.loading = false;
            }
          }).catch((e)=>{
        _this.$message.error(e, "出现未知错误");
      })
    }
  }
}
</script>
<style lang="scss">
.articleTable {
  //border-style: solid;

}
</style>
